<template>
  <a-card class="result-success" :bordered="false">
    <div class="top_box dsp_flex">
      <div class="avatar_div">
        <!-- <a-avatar :size="64" icon="user" /> -->
        <a-avatar :size="64">{{info.name}}</a-avatar>
      </div>

      <div class="infos">
        <div class="dsp_flex">
          <h2 style="margin: 0 30px 0 0">{{info.name}}</h2>
          <a-tag color="#FA541C" v-if="info.status=='UnEntry'">待入职</a-tag>
          <a-tag color="#1890FF" v-else-if="info.status=='OnJob'">在职</a-tag>
          <a-tag color="#F5222D" v-else-if="info.status=='UnDimission'">待离职</a-tag>
          <a-tag color="#F5222D" v-else-if="info.status=='Dimission'">已离职</a-tag>
          <a-tag color="#F5222D" v-else-if="info.status=='Expired'">已失效</a-tag>
          <!-- <a-tag color="#FA541C">待签</a-tag>
          <a-tag color="#F5222D">拒签</a-tag>
          <a-tag color="#B7EB8F">已签</a-tag>
          <a-tag color="#722ED1">关闭</a-tag> -->
        </div>

        <p class="c_a2 dsp_flex desc_p">
          <span>{{info.projectName}}</span>
          <a-divider type="vertical" />
          <span>{{info.deptName}}</span>
          <a-divider type="vertical" />
          <span>{{info.postName}}</span>
        </p>

        <div class="basicInfo_div">
          <a-row>
            <a-col :span="8">
              <p>手机: <span>{{info.mobile}}</span></p>
            </a-col>
            <a-col :span="8">
              <p>微信: <span>{{info.wechat}}</span></p>
            </a-col>
            <a-col :span="8">
              <p>邮箱: <span>{{info.email}}</span></p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="tabs_div">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="个人信息"></a-tab-pane>
        <a-tab-pane key="2" tab="合同信息" force-render></a-tab-pane>
        <a-tab-pane key="3" tab="附件"></a-tab-pane>
        <a-tab-pane key="4" tab="教育经历"></a-tab-pane>
        <a-tab-pane key="5" tab="工作经历"></a-tab-pane>
        <a-tab-pane key="6" tab="家庭成员"></a-tab-pane>
      </a-tabs>
    </div>

    <Tabs1 :personalInfos="personalInfos" v-if="currenTabsIdx === 1" />
    <Tabs2 :contractInfos="info.contract" :projectName="info.projectName" v-if="currenTabsIdx === 2" />
    <Tabs3 :fileList="fileList" v-if="currenTabsIdx === 3" />
    <Tabs4 :eduHistoryList="eduHistoryList" v-if="currenTabsIdx === 4" />
    <Tabs5 :jobHistoryList="jobHistoryList" v-if="currenTabsIdx === 5" />
    <Tabs6 :familyMemberList="familyMemberList" v-if="currenTabsIdx === 6" />
  </a-card>
</template>

<script>
import { employeeDetailgetByIdApi } from '@/services/employeeManage'
import {
  personalInfo,
  eduHistory,
  jobHistory,
  familyMember,
  attachmentList,
} from '@/services/employeeDetail'
// import datas from '@/utils/data'
import { getAge, transferDate } from '@/utils/util'

import Tabs1 from "./tabs/tabs1";
import Tabs2 from "./tabs/tabs2";
import Tabs3 from "./tabs/tabs3";
import Tabs4 from "./tabs/tabs4";
import Tabs5 from "./tabs/tabs5";
import Tabs6 from "./tabs/tabs6";

export default {
  name: "employeeDetails",
  components: { Tabs1, Tabs2, Tabs3, Tabs4, Tabs5, Tabs6 },
  data () {
    return {
      editClkFlag: false,
      layoutType: "horizontal",
      currenTabsIdx: 1,
      info: {},
      personalInfos: {},
      contactPerson: {},
      fileList: []
    };
  },
  created () {
    // let _id = this.$route.query.id    
    let _id = 81

    if (_id) {
      this.getDetail(_id)
    }

  },
  methods: {
    getDetail (id) {
      let params = {
        id
      }
      employeeDetailgetByIdApi(params).then(res => {
        let { code, data, msg } = res.data

        if (code == 200) {
          this.info = data;
          this.$Storage.set('employDetail_userId', this.info.userId)
          this.info.deptName = data.contract.deptName
          this.info.postName = data.contract.postName
          this.info.projectName = data.project.name
          this.getPersonalInfo();
          this.getEduHistory()
          this.getJobHistory()
          this.getAttachmentList()
          this.getFamilyMember()
        } else if (code == 400) {
          this.$message.error(msg)
        }
      })
    },
    callback (key) {
      this.currenTabsIdx = Number(key);
    },
    editclkFn () {
      this.editClkFlag = true;
      this.layoutType = "vertical";
    },
    cancelBtnClkFn () {
      this.editClkFlag = false;
      this.layoutType = "horizontal";
    },
    /**
     * @description: 个人信息接口
     * @param {*}
     * @return {*}
     */
    getPersonalInfo () {
      personalInfo({ id: this.info.userId }).then(res => {
        console.log("res-info", res)

        let { code, data } = res.data
        if (code == 200) {
          let { name, mobile, email, gender, marriage, nation, education, political, census, address, schoolName, schoolMajor, firstJobDate, idCard, birthday } = data
          this.personalInfos = { name, mobile, email, gender, marriage, nation, education, political, census, address, schoolName, schoolMajor, firstJobDate, idCard, birthday };

          console.log(this.personalInfos)

          this.info.wechat = data.wechat;
          this.info.email = data.email;
          // data.bankCard.cardNum bankAddress bankDeposit
          this.personalInfos.cardNum = data.bankCard.cardNum;
          this.personalInfos.bankAddress = data.bankCard.bankAddress;
          this.personalInfos.bankDeposit = data.bankCard.bankDeposit;
          this.personalInfos.contractName = this.contactPerson.name
          this.personalInfos.contractMobile = this.contactPerson.mobile
          this.personalInfos.contractRelation = this.contactPerson.relation;
          this.personalInfos.birthday = transferDate(data.birthday, 0)
          this.personalInfos.age = getAge(this.personalInfos.birthday)
        }
      })
    },
    /**
     * @description: 教育经历接口
     * @param {*}
     * @return {*}
     */
    getEduHistory () {
      eduHistory({ userId: this.info.userId }).then(res => {
        let { code, data } = res.data
        if (code == 200) {
          this.eduHistoryList = data;
        }
      })
    },
    /**
     * @description: 工作经历接口
     * @param {*}
     * @return {*}
     */
    getJobHistory () {
      jobHistory({ userId: this.info.userId }).then(res => {
        let { code, data } = res.data
        if (code == 200) {
          this.jobHistoryList = data;
        }
      })
    },
    /**
     * @description: 附件列表接口
     * @param {*}
     * @return {*}
     */
    getAttachmentList () {
      attachmentList({ userId: this.info.userId }).then(res => {
        let { code, data } = res.data
        if (code == 200) {
          console.log("attachmentList", data);
          for (var i = 0; i < data.length; i++) {
            this.fileList[i] = { id: data[i].id, name: data[i].name, url: data[i].attachUrl, status: "done" }
          }
          console.log("this.fileList", this.fileList);
        }
      })
    },
    /**
     * @description: 家庭成员接口
     * @param {*}
     * @return {*}
     */
    getFamilyMember () {
      familyMember({ userId: this.info.userId }).then(res => {
        let { code, data } = res.data
        if (code == 200) {
          this.familyMemberList = data
          const ContactPerson = data.filter(val => val.contactType == "Contact")
          this.contactPerson = ContactPerson[0];
        }
      })
    },
  },
};
</script>

<style scoped lang="less">
.infos {
  width: 100%;
  margin-left: 20px;
}

.infos div:first-of-type {
  align-items: center;
  justify-content: flex-start;
}

.basicInfo_div {
  color: #a2a2a2;
}

.basicInfo_div p {
  margin-bottom: 0;
}

.tabs_div {
  margin-top: 20px;
}

.editable-add-btn {
  margin: 10px 0;
}

.dsp_flex {
  display: flex;
  display: -webkit-flex;
}

.c_a2 {
  color: #a2a2a2;
}

.desc_p {
  align-items: center;
}

.float_right {
  float: right;
}
</style>
